<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="sm">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success st-btn el-icon-edit"
          @click="$router.push('new')"
          >新增试题</el-button
        >
        <div class="form-box">
          <el-form ref="form" label-width="80px" :model="requestParams">
            <el-form-item label="学科" class="el-col el-col-6">
              <el-select
                v-model="requestParams.subjectID"
                placeholder="请选择"
                @change="changeSubject"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in subjectOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级目录" class="el-col el-col-6">
              <el-select
                v-model="requestParams.catalogID"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in mlList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标签" class="el-col el-col-6">
              <el-select
                v-model="requestParams.tags"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in bqlist"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关键字" class="el-col el-col-6">
              <el-input
                placeholder="根据提干搜索"
                v-model="requestParams.keyword"
              ></el-input>
            </el-form-item>
            <el-form-item label="试题类型" class="el-col el-col-6">
              <el-select
                v-model="requestParams.questionType"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in questionList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="难度" class="el-col el-col-6">
              <el-select
                v-model="requestParams.difficulty"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in diffOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向" class="el-col el-col-6">
              <el-select
                v-model="requestParams.direction"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in directionList"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="录入人" class="el-col el-col-6">
              <el-select
                v-model="requestParams.creatorID"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in userOptions"
                  :key="index"
                  :label="item.username"
                  :value="item.username"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题目备注" class="el-col el-col-6">
              <el-input v-model="requestParams.remarks"></el-input>
            </el-form-item>
            <el-form-item label="企业简称" class="el-col el-col-6">
              <el-input v-model="requestParams.shortName"></el-input>
            </el-form-item>
            <el-form-item label="城市" class="el-col el-col-6">
              <el-select
                v-model="requestParams.province"
                placeholder="请选择"
                style="width: 50%"
                @change="changeCitys"
              >
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="requestParams.city"
                placeholder="请选择"
                style="width: 50%"
              >
                <el-option
                  v-for="(item, index) in citysBot"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="el-col el-col-6" style="text-align: right">
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="searchForm">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 导航栏 -->
      <el-tabs
        v-model="requestParams.chkState"
        @tab-click="tabClick"
        type="card"
      >
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 数据记录 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        style="margin-bottom: 15px"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>
      <!-- 表格区域 -->
      <el-table :data="questions" style="width: 100%" class="my-table">
        <el-table-column
          label="试题编号"
          prop="number"
          width="120px"
        ></el-table-column>
        <el-table-column
          label="学科"
          prop="subject"
          width="120px"
        ></el-table-column>
        <el-table-column
          label="目录"
          prop="catalog"
          width="120px"
        ></el-table-column>
        <el-table-column label="题型" prop="questionType" width="120px">
          <template slot-scope="scope">
            {{
              questionType.find(
                (item) => item.value === +scope.row.questionType
              ).label
            }}
          </template>
        </el-table-column>
        <el-table-column label="题干" prop="question" width="280px">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addDate" width="180px">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="难度" prop="difficulty" width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty == 1">简单</span>
            <span v-else-if="scope.row.difficulty == 2">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column
          label="录入人"
          prop="creator"
          width="120px"
        ></el-table-column>
        <el-table-column label="审核状态" prop="chkState" width="120px">
          <template slot-scope="scope">
            {{ scope.row.chkState | state_chk }}
          </template>
        </el-table-column>
        <el-table-column
          label="审核意见"
          prop="chkRemarks"
          width="120px"
        ></el-table-column>
        <el-table-column
          label="审核人"
          prop="chkUser"
          width="120px"
        ></el-table-column>
        <el-table-column label="发布状态" width="120px">
          <template slot-scope="scope">
            {{ scope.row | state_pub }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250px" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" class="fs" @click="openPreview(scope.row)"
              >预览</el-button
            >
            <el-button
              type="text"
              class="fs"
              @click="openCheckDialog(scope.row)"
              :disabled="scope.row.chkState !== 0"
              >审核</el-button
            >
            <el-button
              type="text"
              class="fs"
              :disabled="scope.row.publishState === 1"
              @click="$router.push(`new?id=${scope.row.id}`)"
              >修改</el-button
            >
            <el-button
              type="text"
              class="fs"
              @click="togglePublish(scope.row)"
              >{{ scope.row.publishState === 1 ? '下架' : '上架' }}</el-button
            >
            <el-button type="text" class="fs" @click="delChoice(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
       <!-- 分页 -->
        <el-pagination
        style="margin-top:20px;text-align:right"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="requestParams.pagesize"
        :current-page="requestParams.page"
        @current-change="pager"
        :page-sizes="[2,3,5,10]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-card>
    <questionsPreview ref="questionsPreview" :data="questionInfo" />
    <openCheckDialog @onsuccess="onSuccess" ref="openCheckDialog" />
  </div>
</template>

<script>
import { choice, choicePublish, remove } from '@/api/hmmm/questions.js'
import { simple as subjectList } from '@/api/hmmm/subjects'
import { simple as mlList } from '@/api/hmmm/directorys.js'
import { simple as bqlist } from '@/api/hmmm/tags.js'
import { difficulty, questionType, direction, chkType, publishType } from '@/api/hmmm/constants.js'
import { simple as userList } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import questionsPreview from '../components/questions-preview'
import openCheckDialog from '../components/questions-check'
export default {
  filters: {
    state_chk (val) {
      if (val === 0) return '待审核'
      if (val === 1) return '已审核'
      if (val === 2) return '已拒绝'
    },
    state_pub (row) {
      if (row.publishState === 1 && row.chkState === 1) {
        return '已发布'
      }
      if (row.publishState === 0 && row.chkState === 1) {
        return '已下架'
      }
      return '待发布'
    }
  },
  data () {
    return {
      questionType,
      difficulty,
      chkType,
      publishType,
      // 学科选项
      subjectOptions: [],
      // 二级目录
      mlList: [],
      // 标签
      bqlist: [],
      // 题型
      questionList: '',
      // 难度选项
      diffOptions: '',
      // 方向
      directionList: direction,
      // 录入人
      userOptions: [],
      // 城市
      citys: provinces(),
      // 城市下区县
      citysBot: null,
      // 精选题库数据 
      questions: [],
      requestParams: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 10,
        chkState: 'all'
      },
      total: null,
      // 预览信息
      questionInfo: {}
    }
  },
  created () {
    this.getxk()
    this.getUserList()
    this.getChoicelist()
  },
  components: {
    // 预览
    questionsPreview,
    // 审核
    openCheckDialog
  },
  methods: {
    // 学科数据获取
    async getxk () {
      // 学科下拉选项
      const { data: subjectArr } = await subjectList()
      this.subjectOptions = subjectArr

    },
    onSuccess () {
      this.getChoicelist()
    },
    // 当学科框发生改变的时候获取二级目录和标签
    async changeSubject (subjectID) {
      if (subjectID) {
        const { data: res } = await mlList(subjectID)
        this.mlList = res
        const { data: list } = await bqlist(subjectID)
        this.bqlist = list
      }
    },
    // 获取录入人的列表
    async getUserList () {
      const { data: res } = await userList()
      this.userOptions = res
    },
    // 当城市发生改变的时候
    async changeCitys (cityName) {
      this.citysBot = await citys(cityName)
    },
    // 点击清除按钮
    clear () {
      for (const key in this.requestParams) {
        if (key !== 'page' && key !== 'pagesize') this.requestParams[key] = null
      }
      this.getChoicelist()
    },
    // 点击搜索按钮
    searchForm () {
      this.requestParams.page = 1
      this.getChoicelist()
    },
    // 获取数据
    async getChoicelist () {
      // 判断是否点击tab栏
      const params = { ...this.requestParams }
      if (params.chkState === 'all') params.chkState = null
      const { data: res } = await choice(params)
      this.questions = res.items
      this.total = res.counts
    },
    // 点击了tab栏
    tabClick () {
       this.requestParams.page = 1
      this.getChoicelist()
    },
    // 点击了预览按钮
    openPreview (row) {
      this.questionInfo = row
      this.$nextTick(() => {
        this.$refs.questionsPreview.open(this.questionInfo)
      })
    },
    // 点击了审核按钮
    openCheckDialog (row) {
      this.$nextTick(() => {
        this.$refs.openCheckDialog.open(row)
      })
    },
    // 点击了上下架按钮
    async togglePublish (row) {
      await this.$confirm(`您确认${row.publishState === 1 ? '下架' : '上架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      row.publishState = row.publishState === 1 ? 0 : 1
      await choicePublish(row)
      this.$message.success(`${row.publishState === 1 ? '下架' : '上架'}成功`)
      this.getChoicelist()
    },
    // 点击了删除按钮
    delChoice (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        await remove(row)
        this.$message.success('删除成功')
        this.getChoicelist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击分页时的函数
    handleSizeChange(val){
       this.requestParams.page = 1
       this.requestParams.pagesize = val
      this.getChoicelist()
    },
    pager (val) {
      this.requestParams.page = val
      this.getChoicelist()
    },
  }
}
</script>

<style scoped lang='less'>
.box-card {
  margin: 15px 10px 0 10px;
}
.sm {
  color: pink;
  font-size: 12px;
}
.st-btn {
  float: right;
}
.form-box {
  margin-top: 30px;
}
.fs {
  font-size: 12px;
  float: left;
}
</style>
